<template>
	<DocWrap>
		<DocCodepen>
			<div class="demo"></div>
			<div class="demo2"></div>
		</DocCodepen>
		<DocUse>
			<h3>props</h3>
			<el-table :data="propsData">
				<el-table-column prop="prop" label="属性" width="180" />
				<el-table-column prop="type" label="类型" width="180" />
				<el-table-column prop="exp" label="说明" />
			</el-table>
		</DocUse>
	</DocWrap>
</template>

<script setup>
	
	import DocWrap from '../../../doc/wrap';
	import DocCodepen from '../../../doc/codepen';
	import DocUse from '../../../doc/use';
	
	const propsData = [
		{
			prop: '$color',
			type: '颜色',
			exp: ''
		}, {
			prop: '$opacity',
			type: '数字',
			exp: '透明度'
		}
	];
	
</script>

<style lang="scss" scoped>
	
	@import '@/theme/material/box.scss';
	
	.demo {
		@include boxHoverModal;
		display: inline-block;
		width: 100px;
		height: 100px;
		background: #409eff;
	}
	
	.demo2 {
		@include boxHoverModal($color: #fff, $opacity: .8);
		display: inline-block;
		width: 100px;
		height: 100px;
		background: #66ccff;
	}
	
</style>